@charset "utf-8";
@import "common/common";
.game_three {
//  display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .game_threebg {
        width: 100%;
        height: 100%;
        //  position: absolute;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .game_threexing {
        position: absolute;
        top: 2rem;
        left: 2rem;
        img {
            width: 88%;
        }
    }
    .game_threeku {
        position: absolute;
    top: 5rem;
    left: 1.9rem;
    z-index: 22;
        img {
            width: 92%;
        }
    }
    .game_threeshou {
        position: absolute;
        top: 14rem;
        left: 5rem;
        z-index: 2;
        animation: threeshou 3s linear ;
        animation-fill-mode: forwards;
//      animation-name: fadeInLeft;
        img {
            width: 55%;
        }
    }
    .game_threeca {
        position: absolute;
        top: 16rem;
        left: 12rem;
        z-index: 2;
        animation: threeca 3s linear ;
        animation-fill-mode: forwards;
        img {
            width: 75%;
        }
    }
    .view {
        position: absolute;
        width: 100%;
        height: 60%;
        top: 5.6rem;
        left: 2rem;
        overflow: hidden;
        z-index: 1;
        .box {
            position: absolute;
            left: 0;
            top: 0;
                width: 18.5rem;
                height: 22.5rem;
            background: url("../img/game/C_final.png") no-repeat center center;
            background-size: auto 100%;
            backface-visibility: hidden;
            overflow: hidden;
            z-index: 1;
            //          opacity: 0.1;
            #cas {
                opacity: 1;
                -webkit-transition: opacity .5s;
                -ms-transition: opacity .5s;
                -moz-transition: opacity .5s;
                left: 0rem;
                position: absolute;
                    width: 19rem;
                height: 22.5rem;
            }
            .noOp {
                z-index: 1;
                opacity: 0 !important;
            }
        }
    }
}


.game_threebo {
    position: absolute;
    bottom: 1.5rem;
    left: 5.5rem;
    z-index: 10;
    a {
        img {
            width: 70%;
        }
    }
}
@keyframes threeshou{
    0%{
        transform: translateX(-50px);
    }
    20%{
       
         transform: translatex(50px);
    }
    50%{
       
         transform: translateY(90px);
    }
    80%{
        
         transform: translateX(80px);
    }
    100%{
        opacity: 0;
        
    }
}

@keyframes threeca{
    0%{
        transform: translateX(50px);
    }
    20%{
       
         transform: translatex(-50px);
    }
    50%{
       
         transform: translateY(-90px);
    }
    80%{
        
         transform: translateX(-80px);
    }
    100%{
        opacity: 0;
        
    }
}